<template>
  <div id="footer">
    <div id="version">
      <div id="webLink">
        <a v-for="(item,index) in datas" :key="index" class="link" target="_blank" :href="item.http">{{ item.info }}</a>
      </div>
      <p id="webInfo">ITPerfect团队官方网站</p>
    </div>
  </div>
</template>
<script>
import { getUrls } from "@/config/api";
export default {
  name: "footer-view",
  data() {
    return {
      datas: []
    };
  },
  mounted() {
    getUrls()
      .then(result => {
        this.datas = result.data;
      })
      .catch(err => {
        throw err;
      });
  }
};
</script>
<style scoped>
#footer {
  width: 100%;
  min-height: auto;
  background-color: #373d41;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: 40px;
}
#version {
  width: 100%;
  padding: 5px 0;
  color: #ccc;
  font-size: 12px;
  letter-spacing: 1px;
  text-align: center;
}
#webLink {
  padding: 10px 0;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
.link {
  padding: 5px 20px;
  color: #fff;
}
.link:hover {
  color: #2d8cf0;
}
#webInfo {
  border-top: 1px solid #ccc;
}
</style>


